<template>
  <div class="approval-list-container">
    <div v-if="todoList.length === 0" class="no-data">
      暂无待办事项
    </div>
    <div v-for="item in todoList" class="approval-item">
      <div style="display: inline-block;margin-bottom: 7px;">
<span class="todo-tag">待办</span>
        <span class="todo-content">{{ item.formName ||'未命名表单'}}</span>
      </div>
      <div class="action-button">
        <button class="pass" @click="approveForm(item.formId)">通过</button>
        <button class="nopass" @click="rejectForm(item.formId)">不通过</button>
      </div>
    </div>
  </div>
</template>
<style scoped>
.todo-content {
  display: flex;
  font-style: italic;
  font-size: 14px;
  color: #333;
}
.todo-tag {
  background-color: #fde68a;
  color: #333;
  padding: 2px 6px;
  border-radius: 10px 2px 10px 2px;
  font-size: 12px;
  display: flex;
  align-items: center;
  margin-right: 270px;
}
.approval-item {
  flex-direction: column;
  width: 97%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  border: 2px solid white;
  border-radius: 18px;
  margin-bottom: 8px;
  background-color: white;
}
.status{
   margin-right: 8px;
  border: 2px solid black;
  border-radius: 1px;
  font-weight: bold;
  background-color: yellow;
 }
.action-button{
  margin-left: 200px;
  display: flex;
  gap: 8px;
}
.approval-list-container{
  width: 100%;
  max-height: 600px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
}
.no-data {
  text-align: center;
  padding: 20px;
  color: #999;
}
.pass{
  font-size: 15px;
  border: 1px solid green;
  border-radius: 15px;
  background-color: white;
  color: green;
}
.nopass{
  font-size: 15px;
  border: 1px solid green;
  border-radius: 15px;
  background-color: green;
  color: white;
}
</style>
<script>
import { getDiffFormByUserIdAndState, updateFormState } from '../js/UserForm';
import { getCurrentUser } from '../js/login';

export default {
  data() {
    return {
      todoList: [],
      currentUser: null
    }
  },
  mounted() {
    this.fetchTodoList();
  },
  methods: {
    fetchTodoList() {
      this.currentUser = getCurrentUser();
      console.log('当前用户:', this.currentUser)
      if (this.currentUser && this.currentUser.user.userId) {
        getDiffFormByUserIdAndState(this.currentUser.user.userId,0)
          .then(response => {
            console.log("response.data:",response.data)
            if (response.data) {
              this.todoList = response.data|| [];
            } else {
              console.error('获取待办列表失败:', response.data.msg);
            }
          })
          .catch(error => {
            console.error('获取待办列表出错:', error);
          });
      } else {
        console.error('未获取到当前用户信息');
      }
    },
    approveForm(formId) {
      this.currentUser = getCurrentUser();
      this.updateState(formId, this.currentUser.user.userId,"1");
    },
    rejectForm(formId) {
      this.currentUser = getCurrentUser();
      this.updateState(formId, this.currentUser.user.userId,"2");
    },
    updateState(formId, userId,state) {
      updateFormState(formId, userId,state)
        .then(response => {
          if (response.data) {
            // 更新成功后重新获取列表
            this.fetchTodoList();
          } else {
            console.error('更新状态失败:');
          }
        })
        .catch(error => {
          console.error('更新状态出错:', error);
        });
    }
  }
}
</script>